<template>
  <div class="marketingAnalysisDetails-container">
    <div class="content-container">
      <div class="naviga"><span>营销渠道分析&nbsp;> </span><span class="setColor">营销渠道详情分析</span></div>
      <div class="mainPage"
           style="background:#f7f7f7">
        <div class="summaryHeader">
          <span style="margin-right: 5px;"><img src="../../../../images/wicon.png"
                 alt=""></span>
          <span>监控线下</span><span class="lightYellow">{{topCount.cityNumber}}</span>个城市，
          <span class="lightYellow">{{topCount.shopNumber}}</span>个终端门店，线上
          <span class="lightYellow">{{topCount.onLineShopNumber}}</span>个电商平台
        </div>
        <div class="channelNum">渠道数 <span v-if="shop=='0'">{{channelNum}}</span><span v-else>{{channelNum1}}</span> 个</div>
        <div class="channelTab">
          <el-tabs type="border-card"
                   v-model="shop">
            <el-tab-pane label="线下门店"
                         name="0">
              <offline :channelNum.sync="channelNum"></offline>
            </el-tab-pane>
            <el-tab-pane label="线上平台"
                         name="1">
              <online :channelNum1.sync="channelNum1"></online>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!--  Dialog容器  -->
    <div class="dialog-container">
      <!--  预警监控列表Dialog  -->
      <div class="earlyWarning-dialog">
      </div>
    </div>
  </div>
</template>

<script>
import mixins from 'utils/mixin'

import * as opreator from 'api/getData'
import online from './onLine'
import offline from './offLine'
export default {
  name: "marketing-analysis-details",
  mixins: [mixins.mixin],
  data () {
    return {
      topCount: {},
      channelNum: 0,
      channelNum1: 0,
      shop: '0'
    }
  },
  components: {
    online,
    offline
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      opreator.getShopCount().then(res => {
        this.topCount = res.data || {}
      })
    }
  }
}
</script>

<style scoped>
.channelNum {
  position: absolute;
  top: 90px;
  z-index: 2000;
  right: 2%;
  font-size: 12px;
  color: #999;
}
.summaryHeader {
  padding: 10px 12px;
}
.whiteContainer {
  padding: 0 12px;
}
.contentHeader {
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
</style>
